.main-title {
  font-size: 20px;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 500;
  color: #101010;
  margin-left: 20px;
  line-height: 20px;
}
.main-title-margin {
  padding: 21px 20px 21px 0;
}
.main-title-padding {
  padding: 21px 20px 1px 0;
}
.margin-align {
  width: 1200px;
  margin: 0 auto
}
.course-item {
  display: flex;
  cursor: pointer;
  .course-pic {
    width: 216px;
    height: 138px;
    border-radius: 8px
    img {
      width: 100%;
      height: 100%;
      border-radius: 8px
    }
  }
  .course-info {
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 8px 0
    .course-title {
      font-size: 16px;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: #1E1E1E;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 322px;
      line-height: 16px
    }
    .course-intro {
      font-size: 14px;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: #A1A1A1;
      line-height: 24px;
      margin-top: 11px;
      width: 322px;
    }
    .course-label-total {
      display: inline-block;
      .course-label {
        font-size: 14px;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        font-weight: 400;
        color: #A1A1A1;
        background: #FAFAFA;
        border-radius: 2px;
        border: 1px solid #F1F1F1;
        margin-right: 6px;
        padding: 5px 8px;
        line-height: 14px;
        float: left
      }
    }
  }
  .course-info-vertical {
    width: 216px;
    margin-left: 0;
    border-left: 1px solid #F6F6F6;
    border-right: 1px solid #F6F6F6;
    border-bottom: 1px solid #F6F6F6;
    height: 164px;
    padding: 0 0 20px 12px;
    border-radius: 0 0 8px 8px;
  }
}
.padding-margin {
  padding: 0 20px 20px 20px;
}
.float-left {
  float: left
}
.inline-block {
  display:inline-block
}
.show-data {
  width: 100%;
  background: #FFFFFF;
  border-radius: 16px;
  margin-top: 30px
  .show-data-pic {
    display: inline-block;
    padding-bottom: 10px;
    .pic-left {
      float:left
      display: inline-block
      img {
        float:left;
        width: 275px;
        height: 284px;
        border-radius: 8px;
        margin-left: 20px
      }
    }
    .pic-right {
      float:left;
      margin-left: 20px
      .pic-textz {
        display: flex;
        align-items: center;
        width: 275px;
        height: 88px;
        background: #FFFFFF;
        border-radius: 8px;
        border: 1px solid #F1F1F1;
        margin-bottom: 10px
        .pic-text{
          margin-right: 35px;
          margin-left: 16px;
          .pic-data {
            font-size: 16px;
            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
            font-weight: 400;
            color: #A1A1A1;
            &:last-child {
              font-size: 24px;
              font-weight: 500;
              color: #101010;
              margin-top: 15px
            }
          }
        }
      }
    }
  }
  .data-show-pic {
    display: inline-block;
    padding: 0 20px 4px;
    img {
      width: 376px;
      height: 100px;
      float: left;
      margin-right: 16px;
      margin-bottom: 16px
      &:nth-child(3n) {
        margin-right: 0
      }
    }
  }
}
.detail-small-title {
  font-size: 14px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  font-weight: 400;
  color: #101010;
  display: flex;
  align-items: center;
  padding-top: 30px
  p {
    width: 4px;
    height: 10px;
    background: #4576FE;
    border-radius: 2px;
    margin-right: 6px
  }
}
.detail-main-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 20px;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 500;
  line-height: 20px
  padding: 21px 20px
  .arrow {
    color: #B9B9B9;
    font-size: 14px
    span {
      cursor: pointer;
      user-select: none;
      &:nth-child(2) {
        margin: 0 12px;
        cursor: default;
      }
    }
  }
}
.ellipsis {
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.padding-dis {
  padding: 21px 20px 21px 0;
}
.text-left {
  text-align: left;
}
